<template>
    <div class="speech">
        <!-- <h1 style="color: #f66;">二层</h1> -->
        <div class="dormitoryBox">
            <div class="dormitoryItem" v-for="(item, index) of dormitoryArr" :key="item.id">
                <div class="topTit">{{ item.numbers }}宿舍</div>
                <div class="contentInfo">
                    <div id="260023610019" class="center1 flex dorm-box-list">
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                        <div class="dorm-person"></div>
                    </div>
                    <div class="flex" style="height: 50px;">
                        <div>
                            <img src="../../../static/wendu.png" style="width: 16px;">
                            <span class="color-font font14">19℃</span>
                        </div>
                        <div><img src="../../../static/shidu.png" style="width: 16px;"> <span
                                class="color-font font14">25%</span></div>
                    </div>
                </div>
                <div id="260023610019nums" class="color-font font18 center">人数：{{ item.number }}人</div> 
            </div>

        </div>
    </div>
</template>

<script setup>

import { ref } from "vue";

let dormitoryArr = ref([])

let dormitoryArray = [
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": "2024-01-09 12:04:08",
    "remark": null,
    "params": {},
    "id": 311,
    "numbers": "201",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "",
    "deviceKey": "[1],",
    "deviceSoundIp": "",
    "deviceSoundSn": "",
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 0,
    "radarId": "260023610019",
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 312,
    "numbers": "202",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[2],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 313,
    "numbers": "203",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[3],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 314,
    "numbers": "204",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[4],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 315,
    "numbers": "205",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[5],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 316,
    "numbers": "206",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[6],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 317,
    "numbers": "207",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层男宿管",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 6,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 1
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 318,
    "numbers": "208",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[8],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 319,
    "numbers": "209",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[9],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": "2023-12-10 16:37:50",
    "remark": null,
    "params": {},
    "id": 320,
    "numbers": "210",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层男生水房",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 4,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 321,
    "numbers": "211",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[11],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 322,
    "numbers": "212",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层男生卫生间",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 4,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 1
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 323,
    "numbers": "213",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[13],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 0,
    "deviceKeyType": 5,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 324,
    "numbers": "215",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[15],[126]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 325,
    "numbers": "216",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层女生卫生间",
    "deviceKey": "[146],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 4,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 326,
    "numbers": "217",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[48],[132]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 327,
    "numbers": "218",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层女生水房",
    "deviceKey": "[129],",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 4,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 328,
    "numbers": "219",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层老师宿舍1",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 6,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 329,
    "numbers": "220",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层老师宿舍2",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 6,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 330,
    "numbers": "221",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[52],[127]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 331,
    "numbers": "222",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[17],[133]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 332,
    "numbers": "223",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层老师宿舍3",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 6,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 333,
    "numbers": "224",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[54],[137]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 1
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 334,
    "numbers": "225",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": "二层老师宿舍4",
    "deviceKey": null,
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 99,
    "deviceKeyType": 6,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 335,
    "numbers": "226",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[50],[135]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 336,
    "numbers": "227",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[59],[139]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 2
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 337,
    "numbers": "228",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[19],[142]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  },
  {
    "searchValue": null,
    "createBy": null,
    "createTime": null,
    "updateBy": null,
    "updateTime": null,
    "remark": null,
    "params": {},
    "id": 338,
    "numbers": "229",
    "storey": "2层",
    "status": 0,
    "floor": "107",
    "remarks": null,
    "deviceKey": "[53],[131]",
    "deviceSoundIp": null,
    "deviceSoundSn": null,
    "delFlag": "0",
    "type": 1,
    "deviceKeyType": 2,
    "radarId": null,
    "deptId": 107,
    "number": 10,
    "numberReal": 0
  }
]

dormitoryArr.value = dormitoryArray
</script>

<style scoped>
.dormitoryBox {
    width: 100%; 
    height: auto;
    display: flex;
    flex-wrap: wrap;
}

.dormitoryItem {
    width: 150px;
    height: 162px;
    background-repeat: no-repeat;
    background-image: url(../../../static/sstj-item.png);
    background-size: 100% auto;
    margin: 5px;
}

.topTit {
    width: 100%;
    color: #89bfff;
    padding-top: 20px;
    font-size: 18px;
    text-align: center;
}

.contentInfo {
    width: 90px;
    height: 70px;
    border-top: 1px solid #394B8F;
    border-bottom: 1px solid #394B8F;
    margin: 2px auto;
    color: #89bfff;
    text-align: center;
}

.dorm-box-list {
    flex-wrap: wrap;
    height: 20px;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dorm-person {
    width: 5px;
    height: 5px;
    background-color: #ff0000;
    margin: 2px;
}
</style>